<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="root"></div>
	</body>
	<script>
		const app = Vue.createApp({
			data() {
				return {
					todoList: [],
					todoItem: "",
				};
			},
			methods: {
				addToDo() {
					if (this.todoItem) {
						this.todoList.push(this.todoItem);
						this.todoItem = "";
					}
				},
			},
			template: `
				<div>
					<input v-model="todoItem" type="text" />
					<button @click="addToDo">添加</button>
					<ul>
						<li v-for="(value,index) of todoList">第{{index+1}}件事情: {{value}}</li>
					</ul>
				</div>
			`,
		});
		app.mount("#root");
	</script>
</html>